<template>
    <div>
        <Row>
            <Card>
                <Icon type="md-glasses"></Icon>
                管理员列表
            </Card>
            <Card>
                <div style="display: flex;flex-direction: row-reverse">
                    <Button @click="newAdmin" type="primary" >新增</Button>
                </div>
                <div class="edittable-con-1 list" style="">
                    <Table border ref="selection" :columns="adminColumns" :data="adminList"></Table>
                </div>
                <div style="text-align: center;margin-top: 20px">
                    <Page :current="pageId" :total="totalPage" :page-size="10" @on-change='search'></Page>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>
import { getAdminList, delAdmin } from '@/api/admin'

export default {
  name: 'admin-list',
  data () {
    return {
      searchObj: {
        pageId: 1
      },
      adminColumns: [
        {
          title: '管理员账号',
          align: 'center',
          key: 'account',
          width: 120
        },
        {
          title: '管理员昵称',
          align: 'center',
          key: 'adminName',
          width: 120
        },
        {
          title: '手机号码',
          align: 'center',
          key: 'mobile',
          width: 120
        },
        {
          title: '上次登录时间',
          align: 'center',
          key: 'loginTime',
          width: 180
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'createTime',
          width: 180
        },
        {
          title: '状态',
          align: 'center',
          width: 120,
          render: (h, params) => {
            switch (parseInt(params.row.status)) {
              case 2:
                return h('Tag', {
                  props: {
                    color: 'red'
                  }
                }, '禁用');
                break;
              case 1:
                return h('Tag', {
                  props: {
                    color: 'green'
                  }
                }, '正常');
                break;
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          key: 'handle',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: { marginRight: '10px' },
                on: {
                  click: () => {
                    this.goDetail(params.row.id)
                  }
                }
              }, '查看详情'),
              h('Poptip', {
                props: {
                  confirm: true,
                  title: '您确定要删除这条数据吗?',
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    this.del(params.row.id)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  }
                }, '删除')
              ])
            ])
          }
        }
      ],
      adminList: [],
      pageId: 1,
      totalPage: 10
    }
  },
  methods: {
    getList () {
      getAdminList(this.searchObj).then(data => {
        this.adminList = data.data
        this.pageId = data.current_page
        this.totalPage = data.total
      })
    },
    goDetail (id) {
      this.$router.push({
        name: 'admin_detail',
        query: {
          id: id
        }
      })
    },
    newAdmin () {
      this.$router.push({
        name: 'admin_detail'
      })
    },
    search () {
      if (arguments[0]) {
        this.searchObj.pageId = arguments[0]
      }
      this.getList()
    },
    del(id) {
      delAdmin(id).then(() => {
        this.$Message.success('删除成功')
        this.getList()
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
